<template>
	<div>
		<view class="search">
			<u--input placeholder="请输入工作任务" :clearable="true" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" v-model="query.workTasks " @confirm="getList"
				@clear="getList">
				<template slot="suffix">
					<view class="search_btn" @click="getList"> 搜索</view>
				</template></u--input>
		</view>
		<div class="box" v-for="(v,i) in list" @click="jumpTo('/pages/supervise/taskDetails',{
			id:v.id
		})">
			<div class="box_item">
				<div class="box_herder">
					<div :class="{
						herderActive:v.logo == '待处理'
					}">{{v.logo}}</div>
				</div>
				<div class="flex  padding20rpx">
					<div class="box_lable">事项类型:</div>
					<div class="box_value">{{v.handleTypeStr}}</div>
				</div>
				<div class="flex  padding20rpx">
					<div class="box_lable">工作内容:</div>
					<div class="box_value">{{v.workContent}}</div>
				</div>
				<div class="flex  padding20rpx">
					<div class="box_lable">责任人:</div>
					<div class="box_value">{{v.onusUserStr}}</div>
				</div>
				<div class="flex  padding20rpx">
					<div class="box_lable">计划时间:</div>
					<div class="box_value">{{v.startDate}} - {{v.endDate}}</div>
				</div>
			</div>
		</div>
		<u-empty mode="list" v-if="list.length<=0" marginTop="80">
		</u-empty>
	</div>
</template>

<script>
	import {
		myManagementList
	} from '@/api/supervise.js'
	export default {
		data() {
			return {
				tabs: 0,
				query: {
					workTasks: '',
					PAGE_NO: 1,
					PAGE_SIZE: 100000
				},
				list: []
			}
		},
		onLoad() {
			if (this.$mp.query.token) {
				uni.setStorageSync('token', this.$mp.query.token)
			}
			this.getList()
		},
		methods: {
			getList() {
				myManagementList(this.query).then(res => {
					console.log(res);
					this.list = res.rows
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.search {

		/deep/.u-input {
			width: 688rpx;
			height: 65rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;
			margin: 0 auto;
			margin-top: 15rpx;
			border-radius: 32rpx;
		}

		&_btn {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #666666;
			padding-left: 10rpx;
			border-left: 1rpx solid #E0E0E0;
		}
	}

	.active {
		background-color: #267DFF !important;
		color: #FFF;
		border-right: none !important;
	}

	.padding20rpx {
		padding: 0 20rpx;
		margin-top: 20rpx;
	}

	.box {
		width: 95%;
		margin: 0 auto;
		border-radius: 8rpx;
		background-color: #FFF;
		margin-top: 20rpx;
		padding: 20rpx 0;
		font-size: 30rpx;

		&_herder {
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #E0E0E0;

			div {
				border: 1rpx solid #F59A23;
				font-size: 26rpx;
				padding: 6rpx 10rpx;
				border-radius: 8rpx;
				color: #F59A23;
			}

			.herderActive {
				color: #267DFF !important;
				border-color: #267DFF !important;
			}
		}

		&_lable {
			color: #999999;
			flex: 0 0 auto;
		}

		&_value {
			margin-left: 10rpx;
		}
	}
</style>